<!-- 地图根据关键词提示 -->
<template>
  <div class=' display-flex'>
   <div class=" flex-1">
    <div>
      <n-input v-model:value="isde" type="text" placeholder="输入关键字选取地点" size="medium" clearable @input="hjkkxs"></n-input>
    </div>
    <div class="kkxcxersdr mt5" v-if="lisyxs.length>0">
        <div class=" display-flex pd pt5 pm5 bbm dfczxczfwer" v-for="sd in lisyxs" @click="xjlsdr(sd)">
          <i class="iconfont dx-map1 cz fz16"></i>
          <div class=" flex-1 ml5">
              <div class="dian fczxrewrt">
                  {{ sd.label }}
              </div>
          </div>
        </div>
    </div>
   </div>
   <div class="ml10">
    <n-button type="primary" size="medium" @click="">确认</n-button>
    
   </div>
  </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import { dxget } from "../../../util/index";
const isde = ref('广东省惠州市惠阳区内环路7栋1单元')
const lisyxs = ref([])
const getaddList = async(address)=>{
  const {data} = await dxget("public/map/geo",{address})
  console.log(data);
  lisyxs.value = data
}
const hjkkxs = (data)=>{
  getaddList(data)
}
const xjlsdr = (data)=>{
  isde.value = data.label
}
</script>
<style scoped>
  .kkxcxersdr{
    max-height: 300px;
    background: #fff;
    border:1px solid #e0e0e0;
    border-radius: 4px;
    overflow: auto;

  }
  .fczxrewrt{
    max-width: 320px;
  }
  .dfczxczfwer:hover{
    background: #f8f8f8;
    cursor: pointer;
  }
</style>